<template>
  <header class="header-container">
    <main class="header-main">
      <!-- 左侧导航 -->
      <nav class="navbar">
        <!-- logo -->
        <RouterLink to="/home" class="logo">
          <img src="../../assets/images/logo.png" alt="logo" />
        </RouterLink>

        <!-- 导航菜单 -->
        <ul class="nav">
          <li :class="$route.path.includes('/home') ? 'active' : ''">
            <RouterLink to="/home/recommend">资源</RouterLink>
          </li>

          <li :class="$route.path.includes('/course') ? 'active' : ''">
            <RouterLink to="/course">课程</RouterLink>
          </li>

          <li :class="$route.path.includes('/practice') ? 'active' : ''">
            <RouterLink to="/practice">练习室</RouterLink>
            <!-- <a href="javascript:;" @click="toTrainingroom">练习室</a> -->
          </li>

          <li :class="$route.path.includes('/communication') ? 'active' : ''">
            <RouterLink to="/communication">交流</RouterLink>
            <!-- <a href="javascript:;" @click="toCommunication">交流</a> -->
          </li>

          <li :class="$route.path.includes('/my') ? 'active' : ''">
            <RouterLink to="/my">我的</RouterLink>
            <!-- <a href="javascript:;" @click="toMy">我的</a> -->
          </li>
        </ul>
      </nav>
    </main>
  </header>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "Header",
});
</script>

<script setup lang="ts">
import { RouterLink } from "vue-router";
</script>

<style lang="less" scoped>
a {
  color: #000;
  text-decoration: none;
  font-size: 18px;
}

.header-container {
  height: 60px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);

  .header-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    height: 100%;
    margin: 0 auto;

    // 左侧导航
    .navbar {
      display: flex;
      align-items: center;

      .logo {
        margin-right: 20px;

        img {
          width: 128px;
        }
      }

      .nav {
        display: flex;
        width: 458px;

        li {
          display: flex;
          justify-content: center;
          flex-grow: 1;
        }

        .active a {
          color: #fa3684;
        }
      }
    }

    // 登录头像
    img {
      vertical-align: bottom !important;
    }
  }
}
</style>
